import React from 'react';
import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import { Layout, Menu, theme } from 'antd';
import { useNavigate, Outlet } from 'react-router-dom';
const { Header, Content, Sider } = Layout;

// 菜单配置
const menuItem = [{
    label: '患者管理',
    key: '/home',
    icon: <UserOutlined />,
},
{
    label: '门诊',
    key: '/home/mz',
    icon: <NotificationOutlined />,
}
]
const Home = () => {
    const {
        token: { colorBgContainer, borderRadiusLG },
    } = theme.useToken();
    const navigate = useNavigate();
    const handleClick = (e) => {
        navigate(e.key)
    }
    return (
        <Layout>
            <Header style={{ display: 'flex', alignItems: 'center' }}>
                <div className="demo-logo" />
            </Header>
            <div style={{ padding: '0 48px' }}>
                <Layout
                    style={{ padding: '24px 0', background: colorBgContainer, borderRadius: borderRadiusLG }}
                >
                    <Sider style={{ background: colorBgContainer }} width={200}>
                        <Menu
                            mode="inline"
                            defaultSelectedKeys={['1']}
                            defaultOpenKeys={['sub1']}
                            style={{ height: '100%' }}
                            items={menuItem}
                            onClick={handleClick}
                        />
                    </Sider>
                    <Content style={{ padding: '0 24px', minHeight: 280, height: 600 }}>
                        <Outlet />
                    </Content>
                </Layout>
            </div>
        </Layout>
    );
};
export default Home;